.Hint {
  cursor: default;
  min-width: 10px;
  color: var(--txt-3);
  font-size: 10px;
  position: absolute;
  bottom: 15px;
  right: 15px;
  user-select: none;
}

.HintTooltip {
  background-color: var(--bg-3);
  box-shadow: 3px 3px 2px var(--shadow-1);
}

.HintQuestion {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
}

.HintQuestion:hover {
  color: var(--primary);
}

.HintAnswer {
  color: var(--primary);
}

.HintAnswerItem {
  padding: 3px 6px;
  margin-top: 3px;
  border: 1px dotted #333;
  color: var(--gray);
}

.HintAnswerHighlight {
  color: var(--primary);
}

@media only screen and (max-width: 600px) {
  .Hint {
    bottom: -25px;
  }
}